<script lang="ts" setup>
import { ERelationType } from '@/common/enums';
import { useToPage } from '@/common/use/common';
import { IBanner } from '@/types';
import { onNavigationBarSearchInputClicked } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
// typescript
const { navigateTo } = useToPage();
const state = reactive({
  sidebarKey: 1
});
const banners = ref<IBanner[]>([
  { imageUrl: "../../static/images/delete/banner/1.jpg", relationType: ERelationType.COMMODITY },
  { imageUrl: "../../static/images/delete/banner/2.jpg", relationType: ERelationType.COMMODITY }
]);

//#region 测试数据
const test = ref([
  {
    id: 1,
    title: "品牌手机",
    children: [
      {title: "iphone", image: "p40.png"},
      {title: "Vivo", image: "p41.png"},
      {title: "Watch", image: "p42.png"},
      {title: "台式主机", image: "p43.png"},
      {title: "双门冰箱", image: "p44.png"},
      {title: "洗衣机", image: "p45.png"},
      {title: "支架", image: "p46.png"}
    ]
  },
  {
    id: 2,
    title: "电脑平板",
    children: [
      {title: "台式主机", image: "p43.png"},
      {title: "双门冰箱", image: "p44.png"},
      {title: "洗衣机", image: "p45.png"},
      {title: "iphone", image: "p40.png"},
      {title: "Vivo", image: "p41.png"},
      {title: "Watch", image: "p42.png"},
      {title: "支架", image: "p46.png"}
    ]
  },
  {
    id: 3,
    title: "家用电器",
    children: [
      {title: "Vivo", image: "p41.png"},
      {title: "Watch", image: "p42.png"},
      {title: "台式主机", image: "p43.png"},
      {title: "双门冰箱", image: "p44.png"},
      {title: "洗衣机", image: "p45.png"},
      {title: "iphone", image: "p40.png"},
      {title: "支架", image: "p46.png"}
    ]
  }
]);
const testChildren = ref(test.value[0].children);
//#endregion

// 侧边栏切换
const switchSidebar = (item: any) => {
  state.sidebarKey = item.id;
  testChildren.value = item.children;
}

// 搜索框点击事件
onNavigationBarSearchInputClicked(() => {
  console.log("搜索框被点击了");

});
</script>

<!-- 分类 -->
<template>
  <view class="container">
    <!-- 侧边栏 -->
    <view class="sidebar">
      <template v-for="(item, itemIndex) in test" :key="itemIndex">
        <view @click="switchSidebar(item)" class="sidebar-item" :class="{ actived: item.id == state.sidebarKey }">
          <text>{{ item.title }}</text>
        </view>
      </template>
    </view>
    <!-- 内容 -->
    <view class="content">
      <!-- banner -->
      <view class="banner-view">
        <w-banner :banners="banners"></w-banner>
      </view>
      <!-- 二级分类 -->
      <view class="class-list">
        <uni-grid :column="3" :show-border="false">
          <template v-for="(item, itemIndex) in testChildren" :key="itemIndex">
            <uni-grid-item>
              <view class="grid-item" @click="navigateTo('/pages/commodity-classify/commodity-classify')">
                <image :src="'../../static/images/delete/classify/' + item.image"></image>
                <text>{{ item.title }}</text>
              </view>
            </uni-grid-item>
          </template>
        </uni-grid>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.container {
  background-color: #fff;
  
  /* #ifdef APP */
  height: 100%;
  /* #endif */
  /* #ifndef APP */
  height: 100vh;
  /* #endif */
  display: flex;
}

.sidebar {
  height: 100%;
  width: 200rpx;
  overflow-y: auto;
  background-color: $border-color;

  .sidebar-item {
    text-align: center;
    line-height: 100rpx;
    color: #999;
    font-size: 24rpx;

    &.actived {
      background-color: #fff;
      color: $text-color;
    }
  }
}

.content {
  flex: 1;
  padding: 30rpx;
}

.banner-view {
  height: 200rpx;
  margin-bottom: 30rpx;
}

.class-list {
  .uni-grid-item {
    margin-bottom: 20rpx;
  }

  .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    image {
      width: 112rpx;
      height: 112rpx;
    }

    text {
      font-size: 24rpx;
      color: $text-color;
    }
  }
}
</style>
